﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<div class="modal-dialog demo2do-modal-dialog" style="width:600px;">

  <div class="modal-content">

    <div class="modal-header beast-breadcrumb no-bottom-border clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>编辑用户属性</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" method="POST" action="${ctx.host}/customers/${customer.id}/attr/edit" data-validate="true">

      <input type="hidden" name="_method" value="PATCH" >
      <input type="hidden" name="id" value="${customer.id}" >
      
      <div class="modal-body">

        <div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">兴趣标签</label>
          <div class="col-xs-8 pull-left">
            <select multiple class="form-control" name="interestTags"  data-selected="${customer.customerTag.interestTagCodes}">
              <c:forEach var="interestTag" items="${persist.interestTags}">
                <option value="${interestTag.value.code}" >${interestTag.value.name}</option>
              </c:forEach>
            </select>
            <input type="hidden" name="interestTag" value="${customer.customerTag.interestTag}">
          </div>
        </div>

        <div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">生活标签</label>
          <div class="col-xs-8 pull-left">
            <select multiple class="form-control" name="lifeTags"  data-selected="${customer.customerTag.lifeTagCodes}">
              <c:forEach var="lifeTag" items="${persist.lifeTags}">
                <option value="${lifeTag.value.code}" >${lifeTag.value.name}</option>
              </c:forEach>
            </select>   
            <input type="hidden" name="lifeTag" value="${customer.customerTag.lifeTag}">
          </div>
        </div>
        
        <div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">性别标签</label>
          <div class="col-xs-8 pull-left">
            <select class="form-control" name="sexTag" data-selected="${customer.customerTag.sexTag}">
              <c:forEach var="sexTag" items="${persist.sexTags}">
                <option value="${sexTag.value.code}" >${sexTag.value.name}</option>
              </c:forEach>
            </select>
          </div>
        </div>
        
        <div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">地域标签</label>
          <div class="col-xs-8 pull-left">
            <select class="form-control" name="areaTag"  data-selected="${customer.customerTag.areaTag}">
              <c:forEach var="areaTag" items="${persist.areaTags}">
                <option value="${areaTag.value.code}" >${areaTag.value.name}</option>
              </c:forEach>
            </select>
          </div>
        </div>
        <div class="form-group demo2do-form-group">
          <label class="col-xs-2 control-label">年龄标签</label>
          <div class="col-xs-8 pull-left">
            <select class="form-control" name="ageTag"  data-selected="${customer.customerTag.ageTag}">
              <c:forEach var="ageTag" items="${persist.ageTags}">
                <option value="${ageTag.value.code}" >${ageTag.value.name}</option>
              </c:forEach>
            </select>
          </div>
        </div>

      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
      </div>
    </form>

  </div>

</div>

<script src="${ctx.resource}/js/plupload.full.min.js"></script>
<script src="${ctx.resource}/js/qiniu.min.js"></script>
<script src="${ctx.resource}/js/bootstrap.validate.trigger.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    	
    	var interestTags = $('select[name="interestTags"]').data('selected');
    	var lifeTags = $('select[name="lifeTags"]').data('selected');
    	var areaTag = $('select[name="areaTag"]').data('selected');
    	var ageTag = $('select[name="ageTag"]').data('selected');
    	var sexTag = $('select[name="sexTag"]').data('selected'); 

        $('select[name="interestTags"]').select2({
            placeholder: '选择兴趣标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });
        $('select[name="interestTags"]').select2('val', interestTags);
        
        $('select[name="interestTags"]').on('change', function(event){
        	var data = 0;
        	$('select[name="interestTags"]').find("option:selected").each(function(){
        		data = data + parseInt($(this).val());
        	})
        	$("input[name='interestTag']").val(data);
        })

        $('select[name="lifeTags"]').select2({
            placeholder: '选择生活标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });
        $('select[name="lifeTags"]').select2('val', lifeTags);
        
        $('select[name="lifeTags"]').on('change', function(event){
        	var data = 0;
        	$('select[name="lifeTags"]').find("option:selected").each(function(){
        		data = data + parseInt($(this).val());
        	})
        	$("input[name='lifeTag']").val(data);
        })
        
        $('select[name="ageTag"]').select2({
            placeholder: '选择性别标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });
        $('select[name="ageTag"]').select2('val', ageTag);
        
        $('select[name="sexTag"]').select2({
            placeholder: '选择年龄标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });
        $('select[name="sexTag"]').select2('val', sexTag);
        
        $('select[name="areaTag"]').select2({
            placeholder: '选择地域标签',
            minimumResultsForSearch: 1,
            allowClear: true
        });
        $('select[name="areaTag"]').select2('val', areaTag);
        
        $('form').shiftform({
          beforeSubmit: function(el) {
            $('form').trigger("validate.ajax.submit");
            return $.bt_validate.result[$.bt_validate.form_id]
          }     
        });
        
        

    })
</script>